<template>
  <div>
    <div class="banner">
      <div class="w">
        <img src="../../assets/img/banner.f559b49d.png" alt="" />
      </div>
    </div>
    <CartItem :info="jingpin">
      <div class="w">
        <div class="title">
          <div class="title__l">
            <img src="../../assets/img/jingpin.png" alt="" />
            <h2>{{ title1 }}</h2>
          </div>
          <div class="title__r" @click="$router.push('/goods')">
            <span>更多</span>
            <img src="../../assets/img/arrow.png" alt="" />
          </div>
        </div>
      </div>
    </CartItem>
    <CartItem :info="hot">
      <div class="w">
        <div class="title">
          <div class="title__l">
            <img src="../../assets/img/jingpin.png" alt="" />
            <h2>{{ title2 }}</h2>
          </div>
          <div class="title__r" @click="$router.push('/goods')">
            <span>更多</span>
            <img src="../../assets/img/arrow.png" alt="" />
          </div>
        </div>
        <img
          src="../../assets/img/banner.4c6b6225.png"
          alt=""
          class="banner1"
        />
      </div>
    </CartItem>
    <JiFen></JiFen>
  </div>
</template>

<script>
import CartItem from "./CartItem";
import { JingpinAPI, HotAPI } from "../../utils/api";
import JiFen from "../home/JiFen.vue";
export default {
  name: "Home",
  components: {
    CartItem,
    JiFen,
  },
  data() {
    return {
      title1: "",
      title2: "",
      jingpin: [],
      hot: [],
    };
  },
  async created() {
    // console.log(process.env.VUE_APP_BASE_URL);
    const jingpin = await JingpinAPI();
    if (jingpin === false) return;
    this.title1 = jingpin.data.name;
    this.jingpin = jingpin.data.data.records.filter((item, index) => index < 3);
    const hot = await HotAPI();
    if (hot === false) return;
    this.hot = hot.data.data.records.filter((item, index) => index < 6);
    this.title2 = hot.data.name;
  },
};
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
  background-color: #fff;
  padding-bottom: 30px;
  img {
    display: block;
  }
}
.title {
  display: flex;
  justify-content: space-between;
  height: 106px;
  align-items: center;
  &__l {
    display: flex;
    justify-content: space-between;
    h2 {
      font-size: 30px;
      color: #242b39;
      font-weight: 700;
      margin-left: 10px;
    }
  }
  &__r {
    cursor: pointer;
    span {
      color: #666;
      margin-right: 10px;
    }
  }
}
.layouts-shared {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    cursor: pointer;
    width: calc(25% - 15px);
    margin-bottom: 20px;
  }
}
.banner1 {
  padding-bottom: 30px;
  display: block;
}
</style>
